<template>
  <tm-row :height="96" :column="12" :width="'100vw'">
    <tm-col :col="10" :height="96" align="start">
      <view class="custom-tag-row">
        <view class="custom-tag-perch"></view>
        <view class="custom-tag-row-left">
          <tm-tag
            v-for="item in props.taglist"
            :key="item.id"
            class="custom-row-tag"
            :border="props.tagActive == item.code ? 0 : 2"
            :color="props.tagActive == item.code ? '#F2F3FF' : '#fff'"
            :fontColor="props.tagActive == item.code ? '#366EF4' : '#424A57'"
            :size="tagSize"
            :label="item.label"
            @click="changeTag(item)"
          >
          </tm-tag>
        </view>
      </view>
    </tm-col>
    <tm-col :col="2" :height="96">
      <img
        src="../../static/header/menu.svg"
        class="custom-tag-row-menu"
        @click="open"
      />
    </tm-col>
  </tm-row>
  <tm-drawer ref="calendarView" :placement="'bottom'" v-model:show="showWin">
    <!-- 标签分组 -->
  </tm-drawer>
</template>

<script lang="ts" setup>
import tmTag from '@/tmui/components/tm-tag/tm-tag.vue'
import tmRow from '@/tmui/components/tm-row/tm-row.vue'
import tmCol from '@/tmui/components/tm-col/tm-col.vue'
import { ref } from 'vue'
import { TabItems } from '@/ts/base/model'

type Props = {
  tagSize: 'm' | 'xs' | 's' | 'm' | 'n' | 'g' | 'lg' // 标签尺寸
  taglist: TabItems[]
  tagActive: string
}
const props = defineProps<Props>()
const { tagSize } = props
const showWin = ref(false)
const emit = defineEmits(['btnClick'])
const changeTag = (item: TabItems) => {
  if (item) {
    emit('btnClick', item)
  }
}
const open = () => {}
</script>

<style lang="scss">
.custom-tag-row {
  width: calc(100vw - 130rpx);
  display: flex;
}
.custom-tag-perch {
  width: 30rpx;
  height: 40rpx;
}
.custom-tag-row-left {
  overflow-x: scroll;
  white-space: nowrap;
  padding-right: 20rpx;
  .custom-row-tag {
    margin-top: 12rpx;
    display: inline-block;
    white-space: nowrap;
  }
}
.custom-tag-row-menu {
  width: 48rpx;
  height: 48rpx;
}
</style>
